<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<router-link to="/home">家</router-link>
			<router-link to="/zoo">动物园</router-link>
			
			<router-view></router-view>
		</div>
		<!-- 父组件 -->
		<template id="homeTemplate">
			<div>
				我是父组件：家
				<br />
				<!-- 在父组件下添加子组件 -->
				<router-link to="/home/father">爸爸</router-link>
				<router-link to="/home/mother">妈妈</router-link>
				<router-link to="/home/son">儿子</router-link>
				
				<router-view></router-view>
			</div>
		</template>
		<template id="zooTemplate">
			<div>
				我是父组件：动物园
				<br />
				<!-- 在父组件下添加子组件 -->
				<router-link to="/zoo/lion">狮子</router-link>
				<router-link to="/zoo/tigger">老虎</router-link>
				<router-link to="/zoo/pig">猪</router-link>
				
				<router-view></router-view>
			</div>
		</template>
		
		<!-- home的子组件 -->
		<template id="fatherTemplate">
			<div>
				我是家的子组件：爸爸
			</div>
		</template>
		<template id="motherTemplate">
			<div>
				我是家的子组件：妈妈
			</div>
		</template>
		<template id="sonTemplate">
			<div>
				我是家的子组件：儿子
			</div>
		</template>
		
		
		<!-- zoo的子组件 -->
		<template id="lionTemplate">
			<div>
				我是动物园的子组件：狮子
			</div>
		</template>
		<template id="tiggerTemplate">
			<div>
				我是动物园的子组件：老虎
			</div>
		</template>
		<template id="pigTemplate">
			<div>
				我是动物园的子组件：猪
			</div>
		</template>
		
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
	
	
		<script type="text/javascript">
			/* 父组件home */
			let homeComponent = {
				template: "#homeTemplate"
			}
			/* 父组件zoo */
			let zooComponent = {
				template: "#zooTemplate"
			}
			/* home的子组件father */
			let fatherComponent = {
				template: "#fatherTemplate"
			}
			/* home的子组件mother */
			let motherComponent = {
				template: "#motherTemplate"
			}
			/* home的子组件son */
			let sonComponent = {
				template: "#sonTemplate"
			}
			/* zoo的子组件lion */
			let lionComponent = {
				template: "#lionTemplate"
			}
			/* zoo的子组件tigger */
			let tiggerComponent = {
				template: "#tiggerTemplate"
			}
			/* zoo的子组件pig */
			let pigComponent = {
				template: "#pigTemplate"
			}
			
			const router = new VueRouter({
				routes:[
					/* children定义子路由的跳转，和<router-link>和<router-view>配合使用 */
					{path:"/home",component:homeComponent,children: [
						{path:"/home/father",component: fatherComponent},
						{path:"/home/mother",component: motherComponent},
						{path:"/home/son",component: sonComponent}
					]},
					
					{path:"/zoo",component:zooComponent,children: [
						{path:"/zoo/lion",component: lionComponent},
						{path:"/zoo/tigger",component: tiggerComponent},
						{path:"/zoo/pig",component: pigComponent}
					]}
					
					
				]
			})
			
			const vue = new Vue({
				el: "#app",
				data: {},
				methods: {},
				mounted() {
					
				},
				router: router
			})
		</script>
	
	</body>
</html>
